<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="true">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<!-- <navigator url="/" hover-class="none" class="change-btn">
						<view class="select-data">{{'设备1'}}</view> 
						<view class="iconfont f-s20">&#xe623;</view>
					</navigator> -->
					<!-- 详情状态 -->
					<template v-if="true">
						<view class="detail-wrap m-t2">

							<view class="detail-item">
								<view class="label">作业状态</view>
								<view class="detail-switch">
									<switch color="#f00" :checked="params.device_status" @change="changeStatus"></switch>
									<!-- :disabled="!isSetting" :style="'opacity:'+(!isSetting?0.7:1)+';'" -->
									<view class="state">{{params.device_status?'正常':'停止'}}</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">拍照间隔</view>
								<!-- <view class="detail-input">
									<view class="content">
										<view class="val t-r">{{detail.camera_interval}}min</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view> -->
								<!-- :disabled="!isSetting" -->
								<picker class="form-picker" :range="camera_interval_data" @change="changeWorkdata" range-key="label" mode="selector">
									<view class="picker">
										<view class="select-data t-r">{{params.camera_interval}}min</view>
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<!-- <view class="detail-item">
								<view class="label">工作时长：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model.number="params.work_time" placeholder="输入工作时长" />
										<view class="link">分</view>
									</view>
								</view>
							</view> -->
							<!-- <view class="detail-item">
								<view class="label">工作时间</view>
								<view class="form-input">
									<view class="content">
										<view class="val work-time">
											<view class="start">
												<picker mode="time" @change="changeTime($event, 1)" :disabled="work_mode_key==0">
													<view :class="{disabled:work_mode_key==0}">{{ everyday.start }}</view>
												</picker>
											</view>
											<view class="line">-</view>
											<view class="over">
												<picker mode="time" @change="changeTime($event, 2)" :disabled="work_mode_key==0">
													<view :class="{disabled:work_mode_key==0}">{{ everyday.over }}</view>
												</picker>
											</view>
										</view>
									</view>
								</view>
							</view> -->
						</view>
					</template>

				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view v-if="false && !isSetting" class="submit-btn" @click="showSetting">设置</view>
						<view v-else class="submit-btn" @click="saveSetting">保存设置</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import formdemo from '@/components/form.vue'
	import loading from '@/components/loading-more.vue'
	export default {
		name: 'name',
		data() {
			return {
				dev_id: '',
				dev_name: '',
				dev_type: '',
				isLogin: false,
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				isStop: true,
				loadingState: {
					default: false
				},
				work_mode: [{ status: 1, name: '光控' }, { status: 2, name: '时控' }], //工作模式
				work_mode_key: 1,
				select_dev_status: {
					id: '',
					name: ''
				},
				dev_status: [{
						id: 1,
						name: "开机"
					},
					{
						id: 2,
						name: "关机"
					},
					{
						id: 3,
						name: "未激活"
					},
					{
						id: 4,
						name: "已禁用"
					}
				],
				isSetting: false,
				detail: {},
				select_dev: {
					id: '',
					name: '',
					typeid: '',
					update: false
				},
				params: {
					id: '',
					device_status: 1,
					camera_interval: 10,
					// work_time:''
					// status:'',
					// light_status: '',
					// run_mode_status: '',
					// run_mode_status_name: '',
					// motor_rotation:'',
					// clean_interval: '',
					// power:'',
					// request_interval:'',
					// everyday_work_date: '',
					// everyday_work_date_start:'',
					// everyday_work_date_over:''
				},
				// camera_interval_data: ['li',10, 20, 30, 40, 50, 60],
				camera_interval_data: [{ label: '10', value: 10 }, { label: '20', value: 20 }, { label: '30', value: 30 }, { label: '40', value: 40 }, { label: '50', value: 50 }, { label: '60', value: 60 }],
				request_interval_data: [10, 20, 30, 40, 50, 60],
				everyday: {
					start: '00:00',
					over: '00:00'
				},
				isUpdate:''
			}
		},
		async onLoad(params) {
			let data = JSON.parse(decodeURIComponent(params.data));
			console.log(123, JSON.parse(decodeURIComponent(params.data)))
			this.detail = data;
			Object.assign(this.params, {
				id: this.detail.id,
				camera_interval: this.detail.camera_interval,
				device_status: this.detail.device_status == 1
			})
			// this.select_dev.id = params.dev_id;
			// this.select_dev.name= params.dev_name;
			// this.dev_type=params.dev_type;
			// if(params.typeid){
			// 	this.select_dev.typeid=params.typeid;
			// }
			// if (this.token) {
			// 	this.isLogin = await this.$loginState('check');
			// 	if (this.isLogin) {
			// 		this.detail=await this.getZdqcDevManageData();
			// 		console.log('detail',this.detail)
			// 		this.setParams();
			// 	} else {
			// 		this.isLogin = await this.$loginState('reset');
			// 	}
			// } 
			// uni.setNavigationBarTitle({
			// 	title:this.select_dev.name
			// })
		},
		async onShow() {
			// 登录状态更新 重新获取token 等值
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}

			if (this.select_dev.update) {
				this.detail = await this.getZdqcDevManageData();
				console.log('update', this.detail)
				this.setParams();
				this.select_dev.update = false;
			}
		},
		onBackPress() {
			// let pages = getCurrentPages();
			// let pre_page = pages[pages.length - 2];
			// pre_page.$vm.isUpdate = 1;
			// pre_page.$vm.getProject();
			if(this.isUpdate==1){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('onManageUpdate', { update: 1 });
			}
		},
		methods: {
			
			changeStatus(e){
				console.log('change',e);
				this.params.device_status = e.detail.value;
			},

			//改变工作时间
			changeTime(e, type) {
				if (type == 1) {
					this.everyday.start = e.detail.value;
				}
				if (type == 2) {
					this.everyday.over = e.detail.value;
				}
				this.install.everyday_work_date = `${this.everyday.start}-${this.everyday.over}`;
			},

			// 获取设备管理详情
			getDevManageData: async function() {
				let res = await this.$api.znjc_api.scan({
					number: this.detail.number
				})
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					this.detail = res.data.data;
					Object.assign(this.params, {
						id: this.detail.id,
						camera_interval: this.detail.camera_interval,
						device_status: this.detail.device_status == 1
					})
				}
			},

			// 获取设备管理参数
			setParams: function() {
				Object.assign(this.params, {
					id: this.detail.id,
					camera_interval: this.detail.camera_interval,
					device_status: Number(this.detail.device_status)
				})
				// this.params.clean_interval = this.detail.list.clean_interval;
				// this.params.request_interval=this.detail.list.request_interval;
				// this.params.light_status = this.detail.list.light_status;
				// this.params.power=this.detail.list.power==null?'':this.detail.list.power+'%';
				// this.params.status=this.detail.list.status;   // 设备状态 1开机(在线)，2关机(离线)，3未激活，4已禁用
				// this.params.everyday_work_date=this.detail.list.work_date;
				// if(this.params.status==1){
				// 	this.select_dev_status.name="开机";
				// }else if(this.params.status==2){
				// 	this.select_dev_status.name="关机";
				// }else if(this.params.status==3){
				// 	this.select_dev_status.name="未激活";
				// }else if(this.params.status==4){
				// 	this.select_dev_status.name="已禁用";
				// }
				// if(this.detail.list.run_mode==1){
				// 	this.params.everyday_work_date='00.00-00.00';
				// 	this.params.everyday_work_date_start = '00.00';
				// 	this.params.everyday_work_date_over = '00.00'; 
				// }else{
				// 	this.params.everyday_work_date_start = this.detail.list.work_date.split('-')[0];
				// 	this.params.everyday_work_date_over = this.detail.list.work_date.split('-')[1];					
				// }	
				// this.detail.work_status.forEach(item => {
				// 	if (item.id == this.detail.list.run_mode) {
				// 		this.params.run_mode_status_name = item.name;
				// 		this.params.run_mode_status = item.id;
				// 	}
				// })
			},

			// 开关
			lightSwitch: function(e) {
				this.params.light_status = e.detail.value ? 1 : 2;
			},

			// 电机开关
			motorRotationSwitch: function(e) {
				this.params.motor_rotation = e.detail.value ? 1 : 2;
			},

			// 工作模式切换
			changeWorkStatus: function(e) {
				let index = e.detail.value;
				this.params.run_mode_status = this.detail.work_status[index].id;
				this.params.run_mode_status_name = this.detail.work_status[index].name;
				this.params.everyday_work_date_start = '00.00';
				this.params.everyday_work_date_over = '00.00';
				this.params.everyday_work_date = this.params.everyday_work_date_start + '-' + this.params.everyday_work_date_over;
			},

			// 设备状态切换
			changeDevStatus: function(e) {
				let index = e.detail.value;
				this.params.status = this.dev_status[index].id;
				this.select_dev_status.name = this.dev_status[index].name;
			},

			// 切换拍照间隔
			changeWorkdata: function(e) {
				let index = e.detail.value;
				this.params.camera_interval = this.camera_interval_data[index].value;
			},

			// 设置请求时间
			changeRequestIntervalData: function(e) {
				let index = e.detail.value;
				this.params.request_interval = this.request_interval_data[index];
			},

			// 打开设置
			showSetting: function() {
				this.isSetting = true;
			},

			// 保存设置
			saveSetting: async function() {
				let _this = this;
				if (this.isStop) {
					this.isStop = false;
					uni.showLoading({
						title: '保存中'
					})
					let params = Object.assign({}, this.params, { device_status: Number(this.params.device_status) })
					console.log('manage-params',params);
					let res = await this.$api.znjc_api.add_device_work(params)
					console.log('namage', res);
					if (res.data.ret == 0) {
						uni.hideLoading();
						this.$showToast({
							icon: 'success',
							title: '设置成功'
						}).then(() => {
							this.isUpdate = 1;
							setTimeout(async () => {
								this.isStop = true;
								this.isSetting = false;
								await _this.getDevManageData();
							}, 2000);
						})

					} else {
						uni.hideLoading();
						this.$showToast({
							icon:'error',
							image: '../../static/images/error.png',
							title: '设置失败'
						})
						setTimeout(() => {
							this.isStop = true;
						}, 300)
					}
				}


			}


		},
		components: {
			loading
		},
		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.submit-btn {
		margin: 10rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.work-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;

		.start,
		.over {
			flex-grow: 2;
			border: .1rpx solid #ddd;
			text-align: center;
		}

		.line {
			margin: 0 10rpx;
		}

		.disabled {
			background: #f5f5f5;
			color: #999;
		}
	}
</style>